<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
        <meta name="author" content="order by dede58.com"/>
		<title>图书管理</title>
		<link rel="stylesheet" href="layui/css/layui.css" media="all">
	</head>
	<style>
  .div0{background-color:#393D49;height:870px;}
  .div1{float:left;height:800px;}
  .ul1{height:100%;}
  .font1{height:60px;background-color:#393D49;padding-top:18px;}
  .font2{font-size:20px;color:white;}
  .font3{font-size:15px;color:white;padding-top:18px;}
  .div2{background-color:#d2d2d2;height:810px;float:left;}
  .div4{padding-top:18px;padding-left:150px;}
  
  .div3{float:left;}
  .div5{width:20px;height:30px;}
  </style>
	<body>
	<div class="layui-container">
	<div class="div0 layui-row layui-col-space10">
	<div class="font1 layui-col-md12 layui-col-lg12">
	
		<div class="layui-row layui-col-space10">
		  <div class="layui-col-md2 font2">
		  个人中心
		  </div>
		  <div class="layui-col-md2 font3">
		   	用户：张三
		  </div>
		  
		  <div class="layui-col-md4"></div>
		  <div class="layui-col-md4 div4">
		    <span class="layui-breadcrumb">
			  <a href="./index.jsp">首页</a>
			  <a href="./login.jsp">登录</a>
			  <a href="./information.jsp">个人中心</a>
			  
			</span>
			</div>
		</div>

	</div>
	
	<div class="div1 layui-col-md2 layui-col-lg2">
	   <ul class="layui-nav layui-nav-tree ul1" lay-filter="test">
		
		 
		  <li class="layui-nav-item"><a href="./information.jsp">我的信息页面</a></li>
		  <li class="layui-nav-item"><a href="">借阅申请页</a></li>
		  <li class="layui-nav-item"><a href="./password.jsp">修改密码</a></li>
		 
		</ul>
	</div>
	 <div class="div2 layui-col-md10 layui-col-lg10"> 
	  
	  	<div class="layui-card">
		  <div class="layui-card-header">我的信息页面</div>
		  <div class="layui-card-body">
		   		<form class="layui-form" action="">
		   			<div class="layui-col-md12 layui-col-lg12">
		   			<div class="div3">
		   			
		   			<div class="layui-form-item">
					    <label class="layui-form-label">账号</label>
					    <div class="layui-input-block">
					      <input style="width:400px" type="text" name="title" required  lay-verify="required" placeholder="请输入编号" autocomplete="off" class="layui-input">
					    </div>
					</div>
		   			
		   			<div class="layui-form-item">
					    <label class="layui-form-label">姓名：</label>
					    <div class="layui-input-block">
					      <input style="width:400px" type="text" name="title" required  lay-verify="required" placeholder="请输入真实姓名" autocomplete="off" class="layui-input">
					    </div>
					</div>
					
					<div class="layui-form-item">
					    <label class="layui-form-label">邮箱：</label>
					    <div class="layui-input-block">
					      <input style="width:400px" type="text" name="title" required  lay-verify="required" placeholder="请输入邮箱号" autocomplete="off" class="layui-input">
					    </div>
					</div>
					
					<div class="layui-form-item">
					    <label class="layui-form-label">联系电话：</label>
					    <div class="layui-input-block">
					      <input style="width:400px" type="text" name="title" required  lay-verify="required" placeholder="请输入联系方式" autocomplete="off" class="layui-input">
					    </div>
					</div>
		   			
		   			<div class="layui-form-item">
					    <label class="layui-form-label">性别：</label>
					    <div class="layui-input-block">
					      <input type="radio" name="sex" value="男" title="男" checked>
					      <input type="radio" name="sex" value="女" title="女">
					    </div>
					</div>
		   			
		   			</div>
		   			
			   			<div class="layui-upload" style="text-align:center">
			   				<img src="" width="200" height="200" class="layui-upload-list" id="demo1">
			   				<br>
			   				<button type="button" class="layui-btn" id="test3">
							  <i class="layui-icon">&#xe67c;</i>上传图片
							</button>
			   			</div>
		   			</div>
		   			
		   			<div class="layui-form-item">
					    <label class="layui-form-label">出生年月：</label>
						   <div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
							  <input type="text" class="layui-input" id="test2" style="width:400px;">
						   </div>
					</div>
		   			
		   			<div class="layui-form-item">
					    <label class="layui-form-label">身份证号：</label>
					    <div class="layui-input-block">
					      <input style="width:400px" type="text" name="title" required  lay-verify="required" placeholder="请输入身份证号码" autocomplete="off" class="layui-input">
					    </div>
					</div>
		   			
		   			<div class="layui-form-item">
					    <div class="layui-input-block">
					      <button style="width:200px;" class="layui-btn" lay-submit lay-filter="formDemo">修改</button>
					     
					    </div>
					</div>
		   			
		   			
		   		</form>
		  </div>
		</div>
	  
	</div>
	
	
	</div>
	</div>
	
	<div style="text-align:center;">
	<br>
		<p>Copyright 2014 - Software Technology from <a href="http://www.yngsxy.net/" title="云南工商学院" target="_blank">云南工商学院</a></p> 
    </div>
	<script src="layui/layui.js" charset="utf-8"></script>
	  <script>
			//Demo
		layui.use('form', function(){
		  var form = layui.form;
		  
		  //监听提交
		  form.on('submit(formDemo)', function(data){
		    layer.msg(JSON.stringify(data.field));
		    return false;
		  });
		});
		
		//注意：导航 依赖 element 模块，否则无法进行功能性操作
		layui.use('element', function(){
		  var element = layui.element;
		  
		  //…
		});
		
		layui.use('carousel', function(){
		  var carousel = layui.carousel;
		  //建造实例
		  carousel.render({
		    elem: '#test1'
		    ,width: '100%' //设置容器宽度
		    ,arrow: 'always' //始终显示箭头
		    //,anim: 'updown' //切换动画方式
		  });
		});
		
		
		layui.use('laydate', function(){
		  var laydate = layui.laydate;
		  
		  //执行一个laydate实例
		  laydate.render({
		    elem: '#test2' //指定元素
		  });
		});//出生日期
		
		
		layui.use('upload', function(){
			var $ = layui.jquery
			,upload = layui.upload;
			//
			var uploadInst = upload.render({
			elem: '#test3'
			,url: '/upload/'
			,before: function(obj){	
				obj.preview(function(index, file, result){
				$('#demo1').attr('src',result);
				});
			}
			,done: function(res){
				if(res.code >0){
					return layui.msg('上传失败');
				}
				
			}
			,error: function(){
			var demoText = $('#demoText');
			demoText.html('<span style="color: #FF5722;">上传成功</span><a class="layui-btn layui-btn-xs demo-reload">重试</a>');
			demoText.find('.demo-reload').on('click', function(){
				uploadTnst.upload();
			});
			}
		});
		});
		 
	  </script> 
	</body>
</html>